
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="1000px" :title="status==1?'新增':'编辑'" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div class="detial">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="90px" class="demo-ruleForm">
          <el-form-item label="类型:" prop="type">
            <el-select v-model="ruleForm.type" style="width:100% !important" placeholder="请选择类型">
              <el-option label="站内通知" :value="1" />
              <el-option label="新闻公告" :value="2" />
              <el-option label="其他" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题:" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="是否发布:" prop="status">
            <el-select v-model="ruleForm.status" style="width:100% !important" placeholder="请选择是否发布">
              <el-option label="发布" :value="1" />
              <el-option label="不发布" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="强制阅读:" prop="force">
            <el-select v-model="ruleForm.force" style="width:100% !important" placeholder="请选择是否强制阅读">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="强制时间(s):" prop="second">
            <el-input v-model="ruleForm.second" placeholder="强制时间" />
          </el-form-item>
          <el-form-item label="内容:" prop="content">
            <!-- <el-input v-model="ruleForm.content" :rows="20" type="textarea" placeholder="请输入内容" /> -->
            <div style="border: 1px solid #ccc;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :default-config="toolbarConfig"
                :mode="mode"
              />
              <Editor
                v-model="ruleForm.content"
                style="height: 350px; overflow-y: hidden;"
                :default-config="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>

          </el-form-item>
        </el-form>
      </div>
      <div class="buttons">
        <el-button
          v-if="status == 1"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="addNews()"
        >
          新 增
        </el-button>
        <el-button
          v-if="status == 2"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="editNews()"
        >
          保 存
        </el-button>
        <el-button
          v-if="status == 1"
          size="mini"
          type=""
          @click="close()"
        >
          取消
        </el-button>

      </div>

    </el-drawer>
  </div>
</template>

<script>
import { createNotice, setNotice } from '@/api/dashboard/dashboard'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from '@/utils/auth'

export default {
  name: 'Detial',
  components: { Editor, Toolbar },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showDialog: false,
      ruleForm: {
        'title': '',
        'content': '',
        'status': '',
        'type': '',
        'force': '',
        'second': 0
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型' }
        ],
        status: [
          { required: true, message: '请选择是否发布' }
        ],
        force: [
          { required: true, message: '请选择是否强制阅读' }
        ],
        content: [
          { required: true, message: '请输入内容' }
        ]
      },

      editor: null,
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
        'uploadImage': {
          server: process.env.VUE_APP_BASE_API + '/user/uploadImg',
          fieldName: 'file',
          // 自定义增加 http  header
          headers: {
            gtAdminToken: getToken()
          },
          // 自定义插入图片
          customInsert(res, insertFn) { // TS 语法
            // customInsert(res, insertFn) {                  // JS 语法
            // res 即服务端的返回结果

            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(res.data.url, '图片', res.data.url)
          }
        },
        'uploadVideo': {
          server: process.env.VUE_APP_BASE_API + '/user/uploadImg',
          fieldName: '消息视频',
          // 自定义增加 http  header
          headers: {
            gtAdminToken: getToken()
          }
        }
      }},
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
      if (!this.showDialog) {
        this.resetForm()
      } else {
        if (this.status === 2) {
          this.ruleForm = this.detial
        }
      }
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },
    addNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          createNotice(this.ruleForm).then(res => {
            this.$message.success('添加成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    },
    editNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          setNotice({
            'notice_id': this.ruleForm.id,

            'title': this.ruleForm.title,

            'content': this.ruleForm.content,

            'status': this.ruleForm.status,

            'type': this.ruleForm.type,

            'force': this.ruleForm.force,

            'second': this.ruleForm.second
          }).then(res => {
            this.$message.success('编辑成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    }

  }

}
</script>
<style scoped>
.detial{
  padding:40px 40px 20px 20px;
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
</style>
